<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>艾玛英语</title>
    <!-- ================== BASE CSS STYLE ================== -->
    <link rel="stylesheet" href="__PATH__/assets/css/base.css">
    <!-- ================== / BASE CSS STYLE ================== -->
    <!-- ================== PAGE CSS STYLE ================== -->
</head>

<body>
    <div id="main">
        <div class="book-list">
            <h2>绘本音频</h2>
            <ul id='book'>
                {foreach name="book" item="vo"}
                <li>
                    <div class="cover">
                        <img src="{$vo.pic}" alt="">
                    </div>
                    <strong style="text-align: center">{$vo.title}</strong>
                    <time>{$vo.addtime}</time>
                </li>
                {/foreach}
            </ul>
        </div>
        <div class="play-book">
            <span>请选择想听的绘本（可多选）</span>
            <button class="play-button"><img src="__PATH__/assets/css/img/03/play.png" alt=""></button>
            <div id="jquery_jplayer_1" class="jp-jplayer" style="display: none"></div>
        </div>
    </div>
    <nav id="navigator">
       <ul>
            <li><a href="{:url('wechat/index')}">今日学习</a></li>
            <li><a href="{:url('wechat/study_recorde')}">学习记录</a></li>
            <li  class="active"><a href="{:url('wechat/book')}">听绘本</a></li>
            <li><a href="{:url('wechat/my')}">我的</a></li>
        </ul>
    </nav>


    <!-- ================== BASE JS ================== -->
    <script src="__PATH__/assets/js/jquery-1.9.1.min.js"></script>
    <script src="__PATH__/assets/js/plugin/jquery.jplayer.min.js"></script>
    <script src="__PATH__/assets/js/common.js"></script>
    <!-- ================== / BASE JS ================== -->
    <!-- ================== PAGE LEVEL JS ================== -->
    <script>
    $(document).ready(function() {
        $("#jquery_jplayer_1").jPlayer({
            ready: function (event) {
                $(this).jPlayer("setMedia", {
                    title: "Fly Me To The Moon",
                    mp3: "__PATH__/assets/audio/Fly_Me_To_The_Moon.mp3",
                    ogg: "__PATH__/assets/audio/Fly_Me_To_The_Moon.ogg"
                });
            },
            swfPath: "__PATH__/assets/js/plugin/jquery.jplayer.swf",
            supplied: "mp3, ogg"
        });
        $('.play-book .play-button').click(function() {
            if($(this).hasClass('active')) {
                $(this).removeClass('active');
                $('#jquery_jplayer_1').jPlayer('pause');
            }
            else {
                $(this).addClass('active');
                $('#jquery_jplayer_1').jPlayer('play');
            }
        });

        $('.book-list li').click(function() {
            $(this).toggleClass('active')
        });
          $i = 2;
          $(window).scroll(function() {
                if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                    $.ajax({
                        type: "POST",
                        url: "{:url('wechat/book')}",
                        data:{pageNumber:$i},
                        dataType:'json', 
                        success: function (dt){
                            var str = '';
                            for (var x=0;x<dt.length;x++){
                                var str = str+"<li><div class='cover'><img src='"+dt[x].pic+"' alt=''></div><strong>"+dt[x].title+"</strong><time>"+dt[x].addtime+"</time></li>";
                            }
                            $("#book").append(str);
                        }
                    })
                    $i++;
                }
            });
    });
    </script>
    <!-- ================== / PAGE LEVEL JS ================== -->
</body>

</html>
